<template>
  <Form @submit="onSubmit">
    <CellGroup inset>
      <Field
        v-model="incomingline"
        name="incomingline"
        label="电缆箱数"
        :rules="[{ required: true, message: '请选择电缆箱数' }]"
      >
        <template #input>
          <RadioGroup v-model="checked" direction="horizontal">
            <Radio name="单箱">单箱</Radio>
            <Radio name="多箱">多箱</Radio>
          </RadioGroup>
        </template>
      </Field>
      <Field
        v-model="serviceId"
        is-link
        readonly
        name="serviceId"
        label="设备ID"
        placeholder="请添加设备ID"
        :rules="[{ required: true, message: '请添加设备ID' }]"
        @click="openDialogFn('id')"
      />
      <Field
        is-link
        readonly
        name="electricityMeter"
        label="电表号"
        @click="openDialogFn('number')"
      />
    </CellGroup>
    <div class="listBox">
      <div class="title">电表号列表</div>
      <List>
        <div class="listItem" v-for="item in electricityMeter" :key="item">
          <span>{{ item }}</span>
          <span @click="delElectricityMeterNumber(item)">删除</span>
        </div>
      </List>
    </div>
    <div class="bottomBtn">
      <Button round block type="primary" native-type="submit"> 下一步 </Button>
    </div>
  </Form>
  <Dialog
    v-model:show="show"
    :title="dialogTitle"
    show-cancel-button
    @confirm="confirmOk"
  >
    <CellGroup inset>
      <div style="display: flex">
        <Field v-model="dialogInputValue" label="" placeholder="请输入" />
        <Button style="width: 100px" type="primary"> 扫一扫 </Button>
      </div>
    </CellGroup>
  </Dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import {
  Form,
  Field,
  CellGroup,
  Button,
  Dialog,
  List,
  showFailToast,
  RadioGroup,
  Radio
} from "vant"
import { useCreateExperiment } from "@/hooks/useCreateExperiment"
import type { FormInstance } from "vant"

const formRef = ref<FormInstance>()

const emits = defineEmits(["nextStep"])

const { createExperimentDataFn, createExperimentData } = useCreateExperiment()

const show = ref(false)

const checked = ref("单箱")
const dialogInputValue = ref("")
const dialogTitle = ref("")
const serviceId = ref("")
const electricityMeter = ref([])

onMounted(() => {
  if (createExperimentData.value.serviceId) {
    serviceId.value = createExperimentData.value.serviceId
    electricityMeter.value = createExperimentData.value.electricityMeter
  }
})

// 添加设备ID
const openDialogFn = (type) => {
  if (type === "id") {
    dialogTitle.value = "添加设备ID"
    dialogInputValue.value = serviceId.value
  } else {
    dialogTitle.value = "添加电表号"
    dialogInputValue.value = ""
  }
  show.value = true
}

const confirmOk = () => {
  if (dialogTitle.value === "添加设备ID") {
    serviceId.value = dialogInputValue.value
  } else {
    electricityMeter.value.push(dialogInputValue.value)
  }
}

const onSubmit = (values) => {
  if (!values.serviceId) {
    return
  }
  if (!electricityMeter.value.length) {
    showFailToast("请添加电表号")
    return
  }
  console.log("createExperimentData.value", createExperimentData.value)
  const data = {
    ...createExperimentData.value,
    incomingline: checked.value,
    serviceId: values.serviceId,
    electricityMeter: electricityMeter.value
  }
  createExperimentDataFn(data)
  emits("nextStep", data)
}

const delElectricityMeterNumber = (value) => {
  electricityMeter.value = electricityMeter.value.filter((i) => i !== value)
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>
